<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="assets/UI/index.css">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/common.css">
    <link rel="shorcut icon" href="assets/images/logo.png">
    <style>
        body {
            background-color: #f4f4f4;
            margin: 0;
            font-family: 'Arial', sans-serif;
        }

        #app {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .registration-container {
            width: 400px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .header1 {
            background-color: #409eff;
            color: #fff;
            padding: 20px;
            text-align: center;
            font-size: 24px;
        }

        .form-container {
            padding: 20px;
        }

        .form-item {
            margin-bottom: 20px;
        }

        #login-link {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="layui-container">
        <div class="layui-logo">
            <img src="assets/images/logo.png"/><cite><span><a href="/">File Transfer System</a></span></cite>
        </div>
    </div>
</div>
<div id="app">
    <div class="registration-container">
        <div class="header1">用户注册</div>

        <div class="form-container">
            <el-form label-position="top" @submit.native.prevent="register">
                <el-form-item label="用户名" required class="form-item">
                    <el-input v-model="username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" required class="form-item">
                    <el-input type="email" v-model="email" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item label="密码" required class="form-item">
                    <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item class="form-item">
                    <el-button type="primary" native-type="submit" style="width: 100%;">注册</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>

    <div id="login-link">
<!--        <el-link @click="goToLoginPage">返回登录界面</el-link>-->
    </div>
</div>

<script src="assets/vue/vue@2.js"></script>
<script src="assets/UI/element.js"></script>
<script src="assets/axios/axios.min.js"></script>
<script type="text/javascript" src="assets/layui/layui.js"></script>
<script type="text/javascript" src="assets/clipboard.min.js"></script>
<script type="text/javascript" src="assets/config.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            email: '',
            password: ''
        },
        methods: {
            register() {
                // 准备注册数据
                const registrationData = {
                    username: this.username,
                    password: this.password,
                    email: this.email
                };

                // 使用 Axios 发送 POST 请求
                axios.post('/register', registrationData)
                    .then(response => {
                        console.log(response.data.msg)
                        if (response.data.code === '1'){
                            this.$message({
                                message: '注册成功！3秒后跳转登录',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        setTimeout(() => {
                            window.location.replace("login.html");
                        }, 3000)

                    })
                    .catch(error => {
                        // 程序出错
                        console.error('未知错误:', error);
                    });
            },
        }
    });
</script>

</body>
</html>
